<template>
  <div class="oderdata" style="width:1140px;height:20%">
    <div class="oderdata_title" style="display:flex">
     <h3 class="oderdata_h2">订单管理</h3>
        <span class="oderdata_title_date">{{nowday}}</span >
      <span class="oderdata_ovvern">订单明细</span>
      <i style="margin-left:1px;margin-top:5px" class="el-icon-arrow-right" ></i>
    </div>

    <div class="oderdata_Box" >
      <ul style="display:flex">
        <li >
          <span  class="iconfont icon-daijiedan"></span>
          <p style="padding-left:4px" class="name">待接单</p>
          <span style="color:red;" class="number">{{waitingOrders}}</span>
        </li>
        <li >
         <span  style="font-size:30px;margin-top:-3px" class="iconfont icon-daishouhuo"></span>
          <p style="padding-left:4px" class="name">待派送</p>
          <span style="color:red" class="number">{{deliveredOrders}}</span>
        </li>

         <li >
          <span  class="iconfont icon-yiwancheng"></span>
          <p style="padding-left:4px" class="name">已完成</p>
          <span  class="number">{{completedOrders}}</span>
        </li>

         <li >
           <span  class="iconfont icon-yiquxiao"></span>
          <p style="padding-left:4px" class="name">已取消</p>
          <span  class="number">{{canceledOrders}}</span>
        </li>

        <li >
           <span  class="iconfont icon-quanbudingdan"></span>
          <p style="padding-left:4px" class="name">全部订单</p>
          <span  class="number">{{allOrders}}</span>
        </li>

      </ul>
    </div>
  </div>
</template>

<script>
import { overviewOrders } from '@/api/wordspace'
import moment from 'moment'
export default {
  name: 'oderdataIndex',
  data () {
    return {
      allOrders: 0,
      canceledOrders: 0,
      completedOrders: 0,
      deliveredOrders: 0,
      waitingOrders: 0,
      nowday: ''
    }
  },
  created () {
    this.init()
  },
  methods: {
    async  init () {
      this.nowday = moment().format('YYYY.MM.DD')
      const res = await overviewOrders()
      console.log(res.data, 'overviewOrders')
      this.allOrders = res.data.allOrders
      this.canceledOrders = res.data.canceledOrders
      this.completedOrders = res.data.completedOrders
      this.deliveredOrders = res.data.deliveredOrders
      this.waitingOrders = res.data.waitingOrders
    }
  }

}
</script>

<style lang="less" scoped>
.oderdata{
/* 水平阴影位置 | 垂直阴影位置 | 模糊距离 | 阴影的颜色 */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.048);
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 20px;
}

.oderdata_Box{
padding-top:20px;
margin-left: -20px;
}

.oderdata_title_date{
  font-size: 12px;

  padding-top: 8px;
  padding-left: 10px;
  color: rgba(12, 12, 12, 0.582);
}
.oderdata_ovvern{
  width: 60px;
  padding-left: 78%;
   padding-top: 4px;
   font-size: 14px;
    color: rgba(12, 12, 12, 0.979);
}

li{
  display: flex;
  width: 18%;
  height: 70px;
  margin-left: 15px;
  padding-left: 20px;
  padding-top: 40px;
  background-color: rgba(221, 221, 80, 0.068);
}
.number{

  font-weight: 600;

  font-weight:600;
  padding-left:60px
}
.name{
  font-size: 14px;
}
</style>
